<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/views/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@ include file="/views/include/nocachehead.jsp"%>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/ajaxfileupload.js"></script>
<title>上传头像</title>

<style type="text/css">
.imgareaselect-border1 {
	background: url(../img/border-v.gif) repeat-y left top;
}

.imgareaselect-border2 {
    background: url(../img/border-h.gif) repeat-x left top;
}

.imgareaselect-border3 {
    background: url(../img/border-v.gif) repeat-y right top;
}

.imgareaselect-border4 {
    background: url(../img/border-h.gif) repeat-x left bottom;
}

.imgareaselect-border1, .imgareaselect-border2,
.imgareaselect-border3, .imgareaselect-border4 {
    filter: alpha(opacity=50);
	opacity: 0.5;
}

.imgareaselect-outer {
	filter:  alpha(opacity=40);
	background-color: #000;
	opacity: 0.4;
}

.imgareaselect-selection {
	opacity: 0;
	filter:  alpha(opacity=0); 
	background-color: #fff; 
}
</style>
</head>

<body>
<%@ include file="/views/include/statusbar.jsp"%>
	<br/><br/><br/>
	<skyline:setSessionAttrToVar var="SESSION_USER" key="SESSION_USER"/>
	<c:out value="${requestScope.errMsg}" escapeXml="false"/>
	<div>
		<form id="upheadForm" name="upheadForm" method="post" enctype="multipart/form-data" >
			<c:choose>
				<c:when test="${empty requestScope.portrait }">
					<img src="${pageContext.request.contextPath}/image/head.jpg" style="float:left;margin:1px 18px 1px 0" id="bigpic"/>
				</c:when>
				<c:otherwise>
					<img src="${pageContext.request.contextPath}/image/${requestScope.portrait.smallFile}.${requestScope.portrait.ext}" style="float:left;margin:1px 18px 1px 0" id="bigpic"/>
				</c:otherwise>
			</c:choose>
			
			<div class="">从电脑中选择你喜欢的照片:</div><br/>
			<span class="">你可以上传JPG、JPEG、GIF、PNG或BMP文件。</span><br/>
			<input type="file" id="file" name="file" style="width:300px"/><br/><br/>
			<input name="upload_submit" type="submit" value="上传照片"/>
		</form>
		<p class=""></p>
		<div class="m">这是你在进行各种活动如留言、评论等都会显示小头像</div><br/>
		<div style="float:left;overflow:hidden;width:75px;height:75px;border:1px solid #f0f0f0">
			<c:choose>
				<c:when test="${empty requestScope.portrait }">
					<img src="${pageContext.request.contextPath}/image/head.jpg" id="prepic"/>
				</c:when>
				<c:otherwise>
					<img src="${pageContext.request.contextPath}/image/${requestScope.portrait.smallFile}.${requestScope.portrait.ext}" id="prepic"/>
				</c:otherwise>
			</c:choose>
		</div>
		<div style="margin-left:56px">随意拖拽或缩放大图中的虚线方格，预览的小图即为保存后的小头像。</div>
		<div class="clear"></div><br/>
		<form method="post" action="${pageContext.request.contextPath}/user/photoupload.html">
			<input type="hidden" id="x" name="x" value="0" />
			<input type="hidden" id="y" name="y" value="0" />
			<input type="hidden" id="size" name="size" value="0" />
			<input type="hidden" name="submitToken" value="<skyline:sessionAttribute key="SESSION_SUBMIT_TOKEN" />"/>
			<input type="submit" name="crop_submit" id="crop_submit" value="保存头像设置" <c:if test="${empty requestScope.portrait }">disabled="disabled"</c:if>/>
			<input name="cancel" id="cancel" type="button" value="撤消" onclick="window.location='${pageContext.request.contextPath}/wo/myWo.html';"/>
		</form>
	</div>

	<script type="text/javascript">
	(function($){
		var minSize = 75;
		function preview(img, selection) {
			if (!selection.width || !selection.height)
				return;
			resizeImg(selection.x1,selection.y1,selection.width,selection.height)
		}
		function resizeImg(x1,y1,width,height) {
			var scaleX = minSize / width;
			var scaleY = minSize / height;
			var _img = new Image();
			_img.src = $('#bigpic').attr("src");
	
			$('#prepic').css({
				width : Math.round(scaleX * _img.width),
				height : Math.round(scaleY * _img.height),
				marginLeft : -Math.round(scaleX * x1),
				marginTop : -Math.round(scaleY * y1)
			});
	
			$('#x').val(x1);
			$('#y').val(y1);
			$('#size').val(width);
		}
		function initImgSelect() {
			var _img = new Image();
			_img.src = $('#bigpic').attr("src");
			var img_w = _img.width;
			var img_h = _img.height;
			var _min = ((img_w > img_h) ? img_h : img_w);
			var _slSize = _min;
			if(_min >= minSize) _slSize = minSize;

			var x1 = Math.floor(img_w / 2 - _slSize / 2);
			var y1 = Math.floor(img_h / 2 - _slSize / 2);
			var x2 = Math.floor(img_w / 2 + _slSize / 2);
			var y2 = Math.floor(img_h / 2 + _slSize / 2);

			$('#x').val(x1);
			$('#y').val(x2);
			$('#size').val(_slSize);
			
			$('#bigpic').imgAreaSelect({
				x1 : x1,
				y1 : y1,
				x2 : x2,
				y2 : y2,
				aspectRatio : '1:1',
				onInit : preview,
				onSelectChange : preview
			});
		}
		$(window).load(function(){
			initImgSelect();
		});
		
		$(document).ready(function() {
			$("input[type=file]").each(function(){
				$(this).change(function(){
					if(! /(.)*\.(jpg|jpeg|gif|bmp|png)$/.test(this.value.toLowerCase())){
						alert('图片上传只支持JPG,JPEG,GIF,BMP,PNG格式文件');
						this.value='';
					}
				});
			});
			
			$('#upheadForm').submit(function() {
				if(!$("#file").val()) {
					alert('请选择需要上传的图片');
					$("#file").focus();
					return false;
				}
				$.ajaxFileUpload ({
					url:'${pageContext.request.contextPath}/upload?method=uploadPortrait',
					//data:"userid=${pageScope.SESSION_USER.id}&albumid=${requestScope.portraitAlbum.id}", 
					secureuri:false,
					fileElementId:'file',
					//dataType: 'json',返回非标准json,存在问题
					success: function (data, status) {
						var html = $(data.body).html();
						var json = html.substring(html.indexOf("{"), html.lastIndexOf("}")+1);
						data = $.parseJSON(json);
						if(data.success) {
							$('#crop_submit').removeAttr('disabled');
							var file = data.fileKey;
							var src = '${pageContext.request.contextPath}/image/'+file;		
							$('#bigpic').attr("src", src).load(function(){
								initImgSelect();
							});
							$('#prepic').attr("src", src).load(function(){
								var _img = new Image();
								_img.src = src;
								var img_w = _img.width;
								var img_h = _img.height;
								var _min = ((img_w > img_h) ? img_h : img_w);
								var _slSize = _min;
								if(_min >= minSize) _slSize = minSize;
								var x1 = Math.floor(img_w / 2 - _slSize / 2);
								var y1 = Math.floor(img_h / 2 - _slSize / 2);
								resizeImg(x1,y1,_slSize,_slSize);
							});
						} else {
							if(data.errmsg) alert(data.errmsg);
							if(!data.logined) location='${pageContext.request.contextPath}/login.html';
						}
					},
					error: function (data, status, e) {
						alert('上传头像失败，请稍候重试！');
					}
				});
				return false;
			});
		});
		
	})(jQuery)
	
	</script>


<%--
	<br>
	<br>
	<div class="mainBox1">
		<div id="container">
			<form id="upForm"
					method="POST" enctype="multipart/form-data">
				<div class="frame" style="margin: 0 0.3em;">
					<img id="photo" src="/skyline/image/cover_s.jpg" onload="init()">
				</div>
				<input name="file" style="width: 220px" id="img" type="file"
					value="选择图片"><br /> <input type="submit" value="上传" />
				<div id="upMessage" style="displan: hidden"></div>
			</form>
			<form id="prevoewForm">
			<div id="preview"
				style="width: 75px; height: 75px; overflow: hidden;">
				<img src="/skyline/image/cover_s.jpg"
					style="width: 283px; height: 283px; margin-left: -91px; margin-top: -65px;">
			</div>
			<input  id="x1">
			<input  id="y1">
			<input  id="x2">
			<input  id="y2">
			<input  id="w">
			<input  id="h">
			<input type="submit" id="saveNewPhoto" value="保存设置"><br />
			</form>
		</div>
	</div>
	 --%>
</body>
</html>